<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>忘记密码</title>
    <link type="text/css" rel="stylesheet" href="css/password.css"/>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

    <script src="/plugins/healthmobile.js"></script>
    <!--导入组件库-->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var height = $(document).height();
            $('.main').css('height', height);
        })
    </script>

    <script>
        var telephone1 = getUrlParam("telephone");
    </script>
</head>

<body>
<div id="app" class="main">
    <div class="main0">
        <div class="formBox">
            <h3>登录密码重置</h3>
            <ul>
                <li class="mainCol firLi">&gt;身份验证</li>
                <li class="mainCol">&gt;登录密码重置</li>
                <li class="lastLi">&gt;重置完成</li>
            </ul>
            <img src="images/line2.png"/>
            <form method="post" :model="form">
                <div class="itembox itembox_2">
                    <label>短信验证码 &nbsp;:</label>
                    <input v-model="form.code"  type="text" placeholder="请输入手机验证码" class="yzm" value="null"></span>
                    <input style="width:15%;background-color:blue"  id="validateCodeButton" @click="sendValidateCode()" type="button"
                                                  value="发送验证码">
<!--                    <el-button  id="validateCodeButton" @click="sendValidateCode()" value="发送验证码" round>发送验证码</el-button>-->
<!--                    <button class="yzmbox2" id="validateCodeButton" @click="sendValidateCode()">发送验证码</button>-->
                </div>
                <div class="itembox itembox_2">
                    <label>登录密码&nbsp;:</label>
                    <input v-model="form.newPwd" type="text" placeholder="请输入新登录密码"></span>
                </div>
                <div class="itembox itembox_2">
                    <label>确认密码&nbsp;:</label>
                    <input v-model="form.newPwd2" type="text" placeholder="请再次输入新密码"></span>
                </div>
               <!-- <div class="itembox itembox_2">
                    <label>验证码&nbsp;:</label>
                    <input type="text" placeholder="请输入验证码" class="yzm"></span>
                    <div class="yzmbox"><img src="images/yanzhengma.png"/></div>
                </div>-->
                <div class="btnBox">
<!--                    <button onclick="window.location.href='password_3.html'">下一步</button>-->
<!--                    <button @click="submit()">下一步</button>-->
                    <el-button type="primary" @click="submit()">下一步</el-button>
<!--                    <input @click="submit()" type="button"-->
<!--                           value="下一步">-->
                </div>
            </form>
        </div>
    </div>
</div>

<!--<div class="footer">
 &lt;!&ndash;   <div class="footer0">
        <div class="footer_l">使用条款 | 隐私保护</div>
        <div c&ndash;&gt;lass="footer_r">© 2015 （杭州）金融信息服务有限公司 杭ICP备0000000号</div>
    </div>-->
</div>
</body>

<!--导入组件库-->
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/plugins/elementui/index.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            form: {
                newPwd: '',
                newPwd2: '',
                telephone: telephone1,
                code:''
            },
        },
        methods: {
            //发送验证码
            sendValidateCode() {
                //获取用户输入的手机号码
                validateCodeButton = $("#validateCodeButton")[0];
                clock = window.setInterval(doLoop, 1000);//一秒执行一次
                axios.post("/validateCode/send4Order.do?telephone=" + this.form.telephone).then((response) => {
                    if (!response.data.flag) {
                        //验证码发送失败
                        this.$message.error('验证码发送失败，请检查手机号输入是否正确')
                    }
                });


            },
            submit() {
                //校验手机号输入是否正确
                let code1 = this.form.code;
                if (!(this.form.newPwd === this.form.newPwd2)) {
                    this.$message.error('两次密码输入不一致，请重新输入');
                    this.form.newPwd = '';
                    this.form.newPwd2 = '';
                    return false;

                }else if (code1 === "") {
                    this.$message.error('请输入验证码');
                    return false;
                }else {
                    this.send();
                }
            },
            send() {
                axios.post("/user/editPassWord.do", this.form).then((response) => {
                    if (!response.data.flag) {
                        //验证码发送失败
                        this.$message.error('修改密码失败，请确认验证码是否正确！')
                    } else {
                        window.location.href = "password_3.html";
                    }
                });
            }
        }
    })
</script>
</html>
